<template>
  <div style="margin-top: 10px">
    <el-card>
      <el-row>
        <div>
          <el-button class="ms-left-buttion" size="small" :style="styleType" style="color: #B8741A;background-color: #F9F1EA">{{title}}</el-button>
          <el-input size="small" v-model="jsr223ProcessorData.name" class="ms-api-header-select" style="width: 380px"/>

          <div style="margin-right: 20px; float: right">
            <i class="icon el-icon-arrow-right" :class="{'is-active': active}" @click="changeActive"/>
            <el-switch v-model="jsr223ProcessorData.enable" style="margin-left: 10px"/>
            <el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/>
            <el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/>
          </div>
        </div>
      </el-row>
      <el-collapse-transition>
        <div v-if="active">
          <el-row style="margin:0px 10px 10px">
            <el-col>
              <div class="document-url">
                <el-link href="https://jmeter.apache.org/usermanual/component_reference.html#BeanShell_PostProcessor"
                         type="primary">{{$t('commons.reference_documentation')}}
                </el-link>
                <ms-instructions-icon :content="$t('api_test.request.processor.bean_shell_processor_tip')"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20" class="script-content">
              <ms-code-edit v-if="isCodeEditAlive" :mode="jsr223ProcessorData.scriptLanguage"
                            :read-only="isReadOnly"
                            :data.sync="jsr223ProcessorData.script" theme="eclipse" :modes="['java','python']"
                            ref="codeEdit"/>
            </el-col>
            <el-col :span="4" class="script-index">
              <ms-dropdown :default-command="jsr223ProcessorData.language" :commands="languages" @command="languageChange"/>
              <div class="template-title">{{$t('api_test.request.processor.code_template')}}</div>
              <div v-for="(template, index) in codeTemplates" :key="index" class="code-template">
                <el-link :disabled="template.disabled" @click="addTemplate(template)">{{template.title}}</el-link>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-collapse-transition>
    </el-card>
  </div>
</template>

<script>
  import MsCodeEdit from "../../../../common/components/MsCodeEdit";
  import MsInstructionsIcon from "../../../../common/components/MsInstructionsIcon";
  import MsDropdown from "../../../../common/components/MsDropdown";


  export default {
    name: "MsJsr233Processor",
    components: {MsDropdown, MsInstructionsIcon, MsCodeEdit},
    data() {
      return {
        active: false,
        jsr223ProcessorData: {},
        codeTemplates: [
          {
            title: this.$t('api_test.request.processor.code_template_get_variable'),
            value: 'vars.get("variable_name")',
          },
          {
            title: this.$t('api_test.request.processor.code_template_set_variable'),
            value: 'vars.put("variable_name", "variable_value")',
          },
          {
            title: this.$t('api_test.request.processor.code_template_get_global_variable'),
            value: 'props.get("variable_name")',
          },
          {
            title: this.$t('api_test.request.processor.code_template_set_global_variable'),
            value: 'props.put("variable_name", "variable_value")',
          },
          {
            title: this.$t('api_test.request.processor.code_template_get_response_header'),
            value: 'prev.getResponseHeaders()',
            disabled: this.isPreProcessor
          },
          {
            title: this.$t('api_test.request.processor.code_template_get_response_code'),
            value: 'prev.getResponseCode()',
            disabled: this.isPreProcessor
          },
          {
            title: this.$t('api_test.request.processor.code_template_get_response_result'),
            value: 'prev.getResponseDataAsString()',
            disabled: this.isPreProcessor
          }
        ],
        isCodeEditAlive: true,
        languages: [
          'java', "python"
        ],
        codeEditModeMap: {
          beanshell: 'java',
          python: 'python'
        }
      }
    },
    created() {
      this.jsr223ProcessorData = this.jsr223Processor;
    },
    props: {
      isReadOnly: {
        type: Boolean,
        default:
          false
      }
      ,
      jsr223Processor: {
        type: Object,
      }
      ,
      isPreProcessor: {
        type: Boolean,
        default:
          false
      }
      ,
      title: String,
      styleType:
      String,
    }
    ,
    watch: {
      jsr223Processor() {
        this.reload();
      }
    }
    ,
    methods: {
      addTemplate(template) {
        if (!this.jsr223ProcessorData.script) {
          this.jsr223ProcessorData.script = "";
        }
        this.jsr223ProcessorData.script += template.value;
        if (this.jsr223ProcessorData.language === 'beanshell') {
          this.jsr223ProcessorData.script += ';';
        }
        this.reload();
      },
      remove() {
        this.$emit('remove', this.jsr223ProcessorData);
      },
      copyRow() {
        this.$emit('copyRow', this.jsr223ProcessorData);
      },
      reload() {
        this.isCodeEditAlive = false;
        this.$nextTick(() => (this.isCodeEditAlive = true));
      },
      languageChange(language) {
        this.jsr223ProcessorData.language = language;
      },
      changeActive() {
        this.active = !this.active;
      },
    }
  }
</script>

<style scoped>

  .ace_editor {
    border-radius: 5px;
  }

  .script-content {
    height: calc(100vh - 570px);
  }

  .script-index {
    padding: 0 20px;
  }

  .template-title {
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 15px;
  }

  .document-url {
    margin-top: 10px;
  }

  .instructions-icon {
    margin-left: 5px;
  }

  .ms-dropdown {
    margin-bottom: 20px;
  }

  .ms-api-header-select {
    margin-left: 20px;
    min-width: 300px;
  }

  .icon.is-active {
    transform: rotate(90deg);
  }

  /deep/ .el-card__body {
    padding: 15px;
  }
</style>
